<template>
  <div>
    <a-breadcrumb>
      <a-breadcrumb-item><h3>{{ form?.formName + '-列表' }}</h3></a-breadcrumb-item>
    </a-breadcrumb>

    <a-radio-group style="margin-bottom: 8px">
      <a-button type="primary" @click="formAdd">新建</a-button>
      <a-button>修改</a-button>
      <a-button danger @click="formDel">删除</a-button>
    </a-radio-group>
    <a-table bordered :dataSource="dataSource" :columns="columns" :loading="tableLoading"
             :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }">
      <template #bodyCell="{ column, text, record }">
        <template v-if="column.dataIndex === 'operation'">
          <a-popconfirm
              v-if="dataSource.length"
              title="确定删除吗?"
              @confirm="deleteFormData(record.key)"
          >
            <a>删除</a>
          </a-popconfirm>
        </template>
      </template>
    </a-table>

  </div>
</template>

<script>

import {AppFormApi} from "@/components/home/lowCode/appDef/js/AppFormApi";
import {AppFormRunApi} from "@/components/home/lowCode/formRun/js/AppFormRunApi";
import {reactive, toRefs} from "vue";

const state = reactive({
  selectedRowKeys: []
});


const onSelectChange = selectedRowKeys => {
  state.selectedRowKeys = selectedRowKeys;
};

export default {
  name: "AppFormList",
  data() {
    return {
      form: {formName: ''},
      ...toRefs(state),
      onSelectChange,
      tableLoading: false,
      dataSource: [
        {
          // key: '2',
          // name: '胡彦祖',
          // age: 42,
          // address1: 'address1',
          // address: 'address',
        },
      ],
      columns: [
        {
          title: '姓名',
          dataIndex: 'name',
        },
        {
          title: '年龄',
          dataIndex: 'age',
        },
        {
          title: '住址',
          dataIndex: 'address',
        },
      ],
      defaultColumns:
          {
            title: '操作',
            dataIndex: 'operation',
          }
    };
  },
  created() {
    this.form.id = this.$route.query.formId;
    this.loadFormBean();
  },
  methods: {
    formDel() {
      let that = this;
      this.$confirm({
        title: '确定删除选中条目吗?',
        content: '删除后数据无法恢复',
        okText: '确定',
        cancelText: '取消',
        okType: 'danger',
        onOk() {
          that.deleteFormData(that.selectedRowKeys.toString());
        },
        onCancel() {},
      });
    },
    formAdd() {
      let routeUrl = this.$router.resolve({
        path: "/low_code/form_new",
        query: {formId: this.form.id}
      });
      window.open(routeUrl.href, '_blank');
    },
    loadFormBean: function () {
      this.tableLoading = true;
      AppFormApi.getFormBean(this.form.id).then((data) => {
        this.form = data;
        this.columns = [];
        data.mainTableBean.fieldList.forEach(i => {
          this.columns.push({
            title: i.fieldName,
            key: i.id,
            dataIndex: i.dbFieldName
          })
        })
        this.columns.push(this.defaultColumns)
        this.loadPageData();
        this.tableLoading = false;
      })
    },
    deleteFormData(dataId) {
      this.tableLoading = true;
      AppFormRunApi.deleteById({formId: this.form.id, dataId: dataId}).then(() => {
        this.$message.info("已删除");
        this.loadPageData();
        this.tableLoading = false;
      })
    },
    loadPageData() {
      AppFormRunApi.getPageData({formId: this.form.id}).then((dataList) => {
        this.dataSource = [];
        dataList.forEach(i => {
          i['key'] = i.id;
          this.dataSource.push(i)
        })
      })
    }
  }
}
</script>

<style scoped>

</style>
